<template>
	<view class="bigView">
		<z-paging ref="paging" :show-default-loading-more-text="false" v-model="dataList" @query="queryList">
			<navBar slot="top" :title="carbonType==0?'嘉园风情':'双碳文化'" @backHandle="backHandle"></navBar>
			<!-- <view class="itemView" v-for="(item, index) in dataList" :key="index" @click="itemHandle(item)">
				<view class="itemTitle">
					<view style="color: #000000;font-size: 16px;font-weight: bold;">{{item.theme}}</view>
				</view>
				<u-parse class="itemContent" :content="item.content" :lazyLoad="true"></u-parse>
				<view class="bottomView">
					<view></view>
					<view style="display: flex;flex-direction: row;padding-right: 10px;align-items: center;font-size: 14px;">
						<button open-type="share" class="shareBtn" style="border:none;color: black;" plain type="primary" v-if="Object.keys(userInfo).length>0">
							<u-icon name="share" size="20"></u-icon>
						</button>
						<view style="margin-right: 20px;" @click="shareHandle(item)" v-else>
							<u-icon name="share" size="20"></u-icon>
						</view>
						<view @click="giveThumbsHandle(item)">
							<u-icon name="heart" size="20"></u-icon>
						</view>
					</view>
				</view>
			</view> -->
			<view class="itemView" v-for="(item, index) in dataList" :key="index" @click="itemHandle(item)">
				<view class="itemTitle">
					<view style="color: #000000;font-size: 16px;font-weight: bold;">{{item.theme}}</view>
				</view>
				<text style="font-size: 12px;color: #999999;padding-left: 10px;margin-bottom: 8px;">{{item.createdAtView}}</text>
			</view>
		</z-paging>
		<!-- <view class="countDownView" style="font-size: 12px;" v-if="Object.keys(userInfo).length>0">
			{{ remainingTime<=0?'浏览完成':remainingTime }} 
		</view> -->
	</view>
</template>

<script>
	import navBar from "@/components/nav_bar.vue"
	import carbonNeutrality from '@/api/carbonNeutrality.js'
	export default{
		components:{
			navBar
		},
		data(){
			return {
				timer: null,
				timestamp:15,
				remainingTime: 15, // 60 秒
				bottom:0,
				carbonType:'',
				dataList:[],
				userInfo:{},
			}
		},
		// computed(){
		// 	formattedTime() {
		// 	  const seconds = this.timestamp % 60;
		// 	  return `00:00:${seconds < 10 ? '0' + seconds : seconds}`;
		// 	}
		// },
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
			// this.listRequest()
			this.$nextTick(() =>{
				this.initUserInfo()
			})
		},
		onLoad(options) {
			if(options.carbonType){
				this.carbonType = options.carbonType;
				// uni.setNavigationBarTitle({
				// 	title: this.carbonType==0?'嘉园风情':'双碳文化'
				// })
			}
			// setTimeout(() => {
			// 	this.startCountdown();
			// }, 1000)
		},
		onShareAppMessage() {
			if(Object.keys(this.userInfo).length==0){
				uni.redirectTo({
					url: '/pages/login/login'
				})
				return
			}
			return{
				title: this.dataList[0].theme,
				path: '/packageHome/pages/carbonNeutrality/index?carbonType='+this.carbonType,
				success(res) {
					console.log('分享成功', res);
					if(this.carbonType == 0){// 嘉园风情
						carbonNeutrality.forward({id:this.dataList[0].id}).then(res =>{
							uni.showToast({
								title:"分享成功"
							})
						}).catch(err =>{
							
						})
					}else{// 双碳文化
						carbonNeutrality.forward2({id:this.dataList[0].id}).then(res =>{
							uni.showToast({
								title:"分享成功"
							})
						}).catch(err =>{
							
						})
					}
				},
				fail(err) {
					console.error('分享失败', err);
					uni.showModal({
						title:err
					})
				}
			}
		},
		methods:{
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo)
				}				
			},
			backHandle(){
				if(this.timer != null){
					clearInterval(this.timer);
				}
			},
			// 事件触发，每秒一次
			change(timestamp) {
				console.log(timestamp);
			},
			formattedTime() {
			  const seconds = this.remainingTime % 60;
			  return `${seconds < 10 ? '0' + seconds : seconds}`;
			},
			startCountdown() {
				if(Object.keys(this.userInfo).length==0){
					return
				}
			      this.timer = setInterval(() => {
			        if (this.remainingTime > 0) {
			          this.remainingTime--;
					  console.log("-------"+this.remainingTime)
			        } else {
			          clearInterval(this.timer);
			          this.remainingTime = 0;
					  this.browseRequest()
			        }
			      }, 1000)
			},
			browseRequest(){
				if(this.carbonType == 0){// 嘉园风情
					carbonNeutrality.browse({id:this.dataList[0].id}).then(res =>{
						
					}).catch(err =>{
					
					})
				}else{// 双碳文化
					carbonNeutrality.browse2({id:this.dataList[0].id}).then(res =>{
						
					}).catch(err =>{
					
					})
				}
				
			},
			queryList(pageNo, pageSize) {
				carbonNeutrality.listHandle({page:pageNo,size:pageSize,carbonType:this.carbonType}).then(res =>{
					let records = res.records;
					if(pageNo==1){
						this.dataList = records;
					}else{
						this.dataList.concat(records)
					}
					this.$refs.paging.complete(records);
				}).catch(error =>{
					this.$refs.paging.complete(false);
				})
			},
			itemHandle(item){
				uni.navigateTo({
					url: '/packageHome/pages/carbonNeutrality/detail?id='+item.id+"&type="+this.carbonType +"&sourceType=1"
				})
			},
			giveThumbsHandle(){// 点赞
				if(Object.keys(this.userInfo).length==0){
					uni.redirectTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.showLoading({
					title:"正在执行..."
				})
				if(this.carbonType == 0){// 嘉园风情
					carbonNeutrality.giveThumbs({id:item.id}).then(res =>{
						uni.hideLoading()
						uni.showToast({
							title:"操作成功"
						})
					}).catch(err =>{
						uni.hideLoading()
					})
				}else{// 双碳文化
					carbonNeutrality.giveThumbs2({id:item.id}).then(res =>{
						uni.hideLoading()
						uni.showToast({
							title:"操作成功"
						})
					}).catch(err =>{
						uni.hideLoading()
					})
				}
				
			},
			shareHandle(item){
				if(Object.keys(this.userInfo).length==0){
					uni.redirectTo({
						url: '/pages/login/login'
					})
					return
				}
			},
			countDownEnd(){
				uni.showToast({
					title:"倒计时结束"
				})
			}
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
}
.topView{
	flex-grow: 1;
	// width: 100vw;
	// background-color: green;
	display: flex;
	flex-direction: column;
	width: 100vw;
	overflow-y: auto;
}
.itemView{
	display: flex;
	flex-direction: column;
	width: 100vw;
	width: calc(100vw - 32px);
	border-radius: 12px;
	margin-left: 16px;
	// padding: 12px;
	background-color: white;
	margin-top: 8px;
	.itemTitle{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 12px;
	}
	.itemContent{
		padding: 0 12px 12px 12px;
		// font-size: 12px;
	}
}
.bottomView{
	width: 100%;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.shareBtn{
	background-color: white;
	border: none;
	font-size: 14px;
}
.countDownView{
	position: fixed;
	width: 50px;
	height: 50px;
	background-color: #FFFFFF;
	right: 5px;
	bottom: 60px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12;
	box-shadow: 1px 1px #FFFFFF;
}
table, td, th {
  border-color: #ddd;
  border-width: 1px;
  border-style: solid;
}
</style>